<template>
	<view class="mine-view">
		<view class="mine-container">
			<view class="fx-center-between">
				<view class="fx-center">
					<image :src="avtr" mode="aspectFill" class="mine-avtr"></image>
					<view class="">
						<view class="fx-center">
							<view class="mine-name">{{nickName}}</view>

							<!-- <van-button plain size="mini"
								custom-style="width:104rpx;font-size:20rpx;height:40rpx;line-height:36rpx;background: #fff;border: 1rpx solid #E2E2E2;color:#8A8F99;">未实名</van-button> -->
						</view>
						<view class="mine-desc">ID:{{userId}} <text @click="$api.copyText(userId)">复制</text></view>
					</view>
				</view>
				<van-button plain color="#4078E5" size="mini"
					custom-style="width:120rpx;font-size:24rpx;height:48rpx;line-height:46rpx"
					@click="toHome">个人主页</van-button>
			</view>
			<view class="fx-center user-vip-box" @click="showLevel">
				<image src="/static/vip-icon.png" mode="heightFix" class="vip-icon"></image>
				<view class="vip-right">
					<view class="vip-num">当前等级Lv{{level}}</view>
					<template v-if="Number(level)<3">
						<view class="vip-desc">还差{{diff}}分可晋升到下一级</view>
						<view class="vip-process">
							<view class="process" :style="'width:'+progress+ '%;'"></view>
						</view>
					</template>
					<template v-else>
						<view class="vip-desc">累计已获得{{diff}}分</view>
					</template>
					<!-- <progress :percent="30" border-radius="6" backgroundColor="rgba(80, 138, 203, 0.2)"
						activeColor="#5FD5F4" /> -->
				</view>
			</view>
		</view>
		<view class="mine-container">
			<view class="fx-center-between">
				<view class="main-basic-name">项目考核</view>
				<view class="look-more" @click="toKaohe">
					全部 <van-icon name="arrow" color="#8A8F99" size="22rpx"></van-icon>
				</view>
			</view>
			<view class="fx-center kaohe-item" v-if="examInfo && examInfo.name">
				<image :src="examInfo.cover_url" mode="aspectFill"></image>
				<view class="kaohe-item-right" @click="toProjectDetail(examInfo)">
					<view class="main-basic-name">{{examInfo.name}}</view>
					<view class="">考核进度：{{examInfo.done}}/{{examInfo.total}}</view>
					<view class="">{{examInfo.state_name}}</view>
				</view>
			</view>
			<view class="no-kaohe fx-center-center" v-else>
				<image src="/static/no_kaohe.png" mode="heightFix"></image>
			</view>
		</view>
		<view class="mine-container">
			<view class="main-basic-name">其他功能</view>
			<view class="mine-other-func">
				<view class="fx-colum-center" @click="toMyWallent">
					<image src="/static/my_wallet.png" mode="widthFix"></image>
					<view class="">我的钱包</view>
				</view>
				<!-- 	<view class="fx-colum-center" @click="toRealName">
					<image src="/static/my_shimin.png" mode="widthFix"></image>
					<view class="">实名认证</view>
				</view> -->
				<view class="fx-colum-center" @click="toPartner">
					<image src="/static/my_hehuoren.png" mode="widthFix"></image>
					<view class="">成为合伙人</view>
				</view>
				<view class="fx-colum-center" @click="toSettleIn">
					<image src="/static/my_xiangmu.png" mode="widthFix"></image>
					<view class="">项目入驻</view>
				</view>
				<view class="fx-colum-center" @click="toMyinvite">
					<image src="/static/my_invite.png" mode="widthFix"></image>
					<view class="">我的邀请</view>
				</view>
				<view class="fx-colum-center" @click="tofeedBack">
					<image src="/static/my_feedback.png" mode="widthFix"></image>
					<view class="">意见反馈</view>
				</view>
				<view class="fx-colum-center" @click="toSetup">
					<image src="/static/my_setting.png" mode="widthFix"></image>
					<view class="">设置</view>
				</view>
			</view>
		</view>
		<c-bottom-dialog ref="vipRef" title="用户等级说明">
			<template>
				<!-- <view class="">
					用户等级是轻钉平台为了高效对接项目方而设定的一个人才选拔机制，等级越高项目方给出的佣金也就越高，同时对接的项目也更优质。
				</view>
				<view style="margin-top: 24rpx;">
					注：客资和成交订单需通过工作台录入系统，才能完成账户等级提升。
				</view> -->
				<rich-text :nodes="levelText"></rich-text>
			</template>
		</c-bottom-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName: '',
				avtr: '',
				userId: '',
				// 项目
				examInfo: {},
				// 等级
				level: '',
				progress: 0,
				diff: '',
				levelText: '', //会员等级描述
			};
		},
		onShow() {
			this.getMyInfo()
		},
		onPullDownRefresh() {
			this.getMyInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		methods: {
			// 获取用户信息
			getMyInfo() {
				this.$api.requst('/gwc/user/me', {}).then(res => {
					this.nickName = res.data.nickname || res.data.mobile
					this.avtr = res.data.avatar
					this.userId = res.data.id
					this.level = res.data.level.current
					this.progress = res.data.level.progress || 0
					this.diff = res.data.level.diff || ''
					this.examInfo = res.data.project
					uni.setStorageSync("userId", res.data.id)
				})
			},
			// 用户等级说明
			async showLevel() {
				this.levelText = await this.$api.getArtical('user_level')
				this.$refs.vipRef.show()
			},
			// 项目考核
			toKaohe() {
				uni.navigateTo({
					url: '/pages/mine/projectExam/projectExam'
				})
			},
			// 个人主页
			toHome() {
				uni.navigateTo({
					url: '/pages/mine/myHome/myHome?id=' + this.userId
				})
			},
			// 我的钱包
			toMyWallent() {
				uni.navigateTo({
					url: '/pages/mine/myWallent/myWallent'
				})
			},
			// 实名认证
			toRealName() {
				uni.navigateTo({
					url: '/pages/mine/realName/realName'
				})
			},
			// 成为合伙人
			toPartner() {
				uni.navigateTo({
					url: '/pages/mine/becomePartner/becomePartner'
				})
			},
			// 项目入驻
			toSettleIn() {
				uni.navigateTo({
					url: '/pages/mine/settleIn/settleIn'
				})
			},
			// 我的邀请
			toMyinvite() {
				uni.navigateTo({
					url: '/pages/mine/myInvite/myInvite'
				})
			},
			// 意见反馈
			tofeedBack() {
				uni.navigateTo({
					url: '/pages/mine/feedback/feedback'
				})
			},
			// 设置
			toSetup() {
				uni.navigateTo({
					url: '/pages/mine/setup/setup'
				})
			},
			// 项目审核详情
			toProjectDetail(item) {
				if (item.done === item.total) {
					uni.navigateTo({
						url: '/pages/workbench/trainCourse/learnResult/learnResult?pid=' + item.project_id +
							"&state=" + item.state
					})
				} else {
					uni.navigateTo({
						url: '/pages/workbench/trainCourse/trainCourse?id=' + item.project_id
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.mine-view {
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.mine-container {
			margin: 16rpx 24rpx 0;
			background-color: #ffffff;
			padding: 32rpx;
			border-radius: 4rpx;

			.mine-avtr {
				width: 120rpx;
				height: 120rpx;
				margin-right: 32rpx;
				border-radius: 50%;
			}

			.mine-name {
				font-size: 34rpx;
				font-weight: bold;
				color: #161616;
				margin-right: 16rpx;
			}

			.mine-desc {
				color: #8A8F99;
				margin-top: 12rpx;
				font-size: 26rpx;

				text {
					margin-left: 8rpx;
				}
			}

			.user-vip-box {
				background: linear-gradient(270deg, #213253 0%, #2B3E63 100%);
				border-radius: 4rpx;
				padding: 28rpx 34rpx 34rpx 24rpx;
				margin-top: 32rpx;

				.vip-icon {
					margin-right: 34rpx;
					width: 80rpx;
					height: 80rpx;
					flex-shrink: 0;
				}

				.vip-right {
					flex: 1;

					.vip-num {
						color: #FFFFFF;
						font-size: 30rpx;
						font-weight: bold;
					}

					.vip-desc {
						color: rgba(255, 255, 255, 0.6);
						margin: 12rpx 0;
					}

					.vip-process {
						width: 100%;
						height: 10rpx;
						background: rgba(#508ACB, 0.2);
						border-radius: 8rpx;

						.process {
							background: linear-gradient(90deg, #0964C3 0%, #5FD5F4 100%);
							height: 100%;
							border-radius: 8rpx;
						}
					}
				}

			}

			.look-more {
				color: #8A8F99;
				font-size: 26rpx;
			}

			.kaohe-item {
				margin-top: 24rpx;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 4rpx;
					margin-right: 32rpx;
				}

				.kaohe-item-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 26rpx;
					color: #5C5F66;
					height: 180rpx;
				}
			}

			.no-kaohe {
				padding: 36rpx 0 10rpx;
				text-align: center;

				image {
					width: 400rpx;
					height: 160rpx;
				}
			}

			.mine-other-func {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 36rpx;
				color: #161616;
				font-size: 26rpx;
				text-align: center;
				margin-top: 40rpx;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 26rpx;
				}
			}
		}
	}
</style>